<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语音朗读</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="resources/css/ion.rangeSlider.css" rel="stylesheet" />
    <style>
        body{
            padding: 20px;
        }
        textarea{
            width: 100%;
            height: 260px;
        }
    </style>
</head>
<body>
<textarea name=""  cols="30" rows="10" id="sppekContent" placeholder="在此輸入內容..."></textarea>
<span style="display: block;margin-left: 500px;">音量</span>
<div class="demo__body"  style="width: 300px;margin: auto;">
  <input id="demo_0" type="" name="" value="1" class="irs-hidden-input" tabindex="-1" readonly="" style="display: none;">
</div>
<span style="display: block;margin-left: 500px;">語速</span>
<div  class="demo__body" style="width: 300px;margin: auto;">
  <input id="demo_1" type="" name="" value="10" class="irs-hidden-input" tabindex="-1" readonly="" style="display: none;">
</div>
<div style="text-align: center;">
    <a href="javascript:;" id="reading"> <input type="button" value="朗讀"></a>
<!-- <a href="javascript:;" id="pause"> <input type="button" value="暫停"></a>
<a href="javascript:;" id="go_on"> <input type="button" value="繼續"></a> -->
<a href="javascript:;" id="stop"> <input type="button" value="停止"></a>
</div>
<script>

 
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="resources/js/ion.rangeSlider.min.js"></script>
<script type="text/javascript">
       $("#demo_0").ionRangeSlider({
        skin: "big",
        min: 0,
        max: 10,
        onStart: function (data) {
            // fired then range slider is ready
        },
        onChange: function (data) {
            // fired on every range slider update
        },
        onFinish: function (data) {
            // fired on pointer release
        },
        onUpdate: function (data) {
            // fired on changing slider with Update method
        }
    });
       $("#demo_1").ionRangeSlider({
        skin: "big",
        min: 0,
        max: 100,
        onStart: function (data) {
            // fired then range slider is ready
        },
        onChange: function (data) {
            // fired on every range slider update
        },
        onFinish: function (data) {
            // fired on pointer release
        },
        onUpdate: function (data) {
            // fired on changing slider with Update method
        }
    });
</script>
</body>
</html>